<template>
  <div class="right d-none col-2 ml-lg-1 d-lg-block p-0">
      <!-- 右边显示 ，在移动端隐藏 -->
      <div class="person w-100 ">
          <!-- //个人信息 -->
           <div class="card w-100 my h-75" v-show="personIndex==1" >
             <ul class="list-group list-group-flush">
               <li class="list-group-item font-weight-bold">陈东铭个人名片</li>
               <li class="list-group-item">毕业院校：福建福州闽江学院</li>
               <li class="list-group-item">现居:福建泉州德化陶瓷之都</li>
               <li class="list-group-item">技能：吉他，前端，后端</li>
             </ul>
           </div>
         <img src="../../assets/imgs/my.jpg" v-show="personIndex==2" class="w-100 wechat h-75" alt="">
         <img src="../../assets/imgs/qq.png" v-show="personIndex==3" class="w-100 qqGroup h-75" alt="">
         <img src="../../assets/imgs/official.jpg"  v-show="personIndex==4" class="w-100 official h-75" alt="">
         <div class="btn-group h-25" role="group" aria-label="Basic example">
           <button type="button" class="btn btn-light" @click="personIndex=1">明明</button>
           <button type="button" class="btn btn-light " @click="personIndex=2">微信</button>
           <button type="button" class="btn btn-light " @click="personIndex=3">QQ交流群</button>
           <button type="button" class="btn btn-light" @click="personIndex=4">公众号</button>
         </div>
      </div>
      <!-- //热门标签 -->
      <div class="hot-label card mt-2 ">
         <div class="card-header bg-white font-weight-bold">
            热门标签
          </div>
          <div class="float-label p-2">
             <button type="button" class="btn ml-1 mt-2 label-btn" :style="colorRandom()" v-for="(item,index) in babelArr" :key='index'>{{item}}</button>
          </div>
      </div>
      <div class="card w-100 new-daily">
        <!-- 推荐的 -->
        <div class="card-header bg-white font-weight-bold">
           推荐阅读
         </div>
         <ul class="list-group list-group-flush">
             <li class="list-group-item d-flex font-weight-light recommend-li" :key='item.articleId'  v-for="item in tecBlog">
               <img :src="item.img||'https://www.yangqq.com/d/file/news/s/2020-04-02/b06f0385e0e4226794339fdd31419036.jpg'" class="w-25" alt="">
               <p class="recommend-content ml-2">{{item.atitle}}</p>
             </li>

           </ul>
      </div>
      <div class="hot-label card mt-2 ">
         <div class="card-header bg-white font-weight-bold">
            友情链接
          </div>
          <div class="float-label p-2">
             <a :href="item.src"  class="btn ml-1 mt-2 label-btn" :style="colorRandom()" v-for="(item,index) in linkArr" target="_blank"  :key='index'>{{item.title}}</a>
          </div>
      </div>
      <div class="hot-label card mt-2 ">
         <div class="card-header bg-white font-weight-bold">
            运营数据
          </div>
          <ul class="list-group list-group-flush">
              <li class="list-group-item" v-for="(item,index) in operationalData" :key='index' >
                <i class="iconfont" :class="getIcon(item.name)"></i>
                <span>{{item.title}}</span>
                <span class="text-black-50">{{$util.changeNum(item.num)}}</span>
              </li>

            </ul>
      </div>
      <!-- right 闭合标签 -->
  </div>
</template>

<script>
  export default {
    data () {
      return {
       //运营数据
       operationalData:[
         {name:'liulan',title:'今日浏览量',num:233244,time:'2019-09-08'},
         {name:'dianzan',title:'点赞数',num:234234,time:'2019-09-08'},
         {name:'lanmu',title:'栏目数',num:2342355,time:'2019-09-08'},
         {name:'pinglun',title:'今日评论数',num:555,time:'2019-09-08'},
         {name:'see',title:'总浏览量',num:93349445,time:'2019-09-08'},
         ],
       //友情链接
       linkArr:[
         {title:'xx1299',src:'http://www.xx1299.cn'},
         {title:'杨青青博客',src:'https://www.yangqq.com/'},
         {title:'多股🐟',src:'http://www.duoguyu.com/'},
         {title:'Jensonhui‘s blog',src:'https://www.jensonhui.top/'},
         {title:'90后程序员夜月归途',src:'http://www.guitu18.com/'},
         {title:'小丑伯乐的个人博客',src:'http://www.xcbl.cn/'},
       ],
       //热门标签
       babelArr:['java','node','express','koa','koa2','myeclipse','git','linux','web','python'],
       personIndex:1,//个人信息显示下表
       tecBlog:[],
      }
    },
    components: {

    },
    created() {
      this.getTecBlogs();
    },
    methods:{
      //获取运营信息
      getWebData(){
        this.$axios.get(this.$url+"getWebData").then(res=>{
                   console.log(res.data.data)
                   let tmp = res.data.data;
                   tmp.splice(5,5);
                   tmp.forEach(element => {
                       element.atime = this.$moment(element.atime).format(('YYYY-MM-DD hh:mm:ss'));
                   });
        
                   this.tecBlog = tmp;
        
        })
      },
      //获取图标
      getIcon(icon){
        return "icon-"+icon;
      },
      colorRandom(){//十六进制颜色随机
      			var r = Math.floor(Math.random()*256);
      			var g = Math.floor(Math.random()*256);
      			var b = Math.floor(Math.random()*256);
      			var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
      			return `background:${color}`;
      },
      getTecBlogs(){
            this.$axios.get(this.$url+"getDynamicById?belong=tec&pageNo=1").then(res=>{
                 console.log(res.data.data)
                 let tmp = res.data.data;
                 tmp.splice(5,5);
                 tmp.forEach(element => {
                     element.atime = this.$moment(element.atime).format(('YYYY-MM-DD hh:mm:ss'));
                 });

                 this.tecBlog = tmp;

      })
        }
    }
  }
</script>

<style lang="less">
  .right{
    /* 标签 */
    .label-btn{
      color: white;
     }
     .label-btn:hover{
        background: #fff; box-shadow: #ccc 1px 1px 8px;
       transform: scale(1.05);
        transition:all .5s ease;
     }
    .recommend-li{
      cursor: pointer;
    }
    .recommend-li:hover{
          background: #fff; box-shadow: #ccc 1px 1px 8px;

    }
    .recommend-li:hover img{
          background: #fff; box-shadow: #ccc 1px 1px 8px;
          transform: scale(1.05);
          transition:all .5s ease;
    }
    /* //推荐阅读 */
    .recommend-content{
      max-height:100px;       /*首先设置div高度*/

      overflow:hidden;           /*设置超出部分隐藏*/

      text-overflow:ellipsis;    /*然后设置文本隐藏方式*/

      /*为了实现多行文本也有效果要设置如下3个属性，具体属性的含义我还不是很清楚：*/

      display:-webkit-box;

      -webkit-line-clamp:2;    /*只显示3行，如果不设置这个属性，会出现文本被拦腰截断的现象*/

      -webkit-box-orient: vertical;
    }

      .person{

          height: 300px;
      }

  }

</style>
